<template>
  <Modal
    v-model="visible"
    width="500"
    title="费率调整"
  >
    <Form ref="form" :model="form" :rules="rules" :label-width="120" @submit.native.prevent>
      <FormItem label="调整代理费率:" prop="baseAgentCost">
        <div style="display: flex;">
          <Select v-model="form.baseAgentType" style="width: 120px; margin-right: 10px;">
            <template v-for="{ key, value } in agentType">
              <Option :value="key" :key="key">{{ value }}</Option>
            </template>
          </Select>
          <Input v-model="form.baseAgentCost" type="number" number placeholder="请输入代理费率" style="flex: 1;">
            <span slot="append">{{ form.baseAgentType === '1' ? '%' : '元' }}</span>
          </Input>
        </div>
      </FormItem>
    </Form>
    <p style="margin-left: 10px; color: #8C8C8C;">已勾选房源的代理费按上述设置规则计算</p>
    
    <div slot="footer">
      <Button type="text" @click="hide">取消</Button>
      <Button type="primary" @click="onConfirm">保存</Button>
    </div>
  </Modal>
</template>

<script>
  export default {
    data() {
      const rateValidate = (rule, value, callback) => {
        let reg = /^\d+(\.\d{1,2}){0,1}$/
        if (this.form.baseAgentType == '1') {
          if (value < 0 || value > 100 || !reg.test(value)) return callback('请输入正确的代理费率，且保留两位小数')
        } else {
          if (value < 0 || !reg.test(value)) return callback('请输入正确的代理费率，且保留两位小数')
        }
        callback()
      }
      return {
        visible: false,
        form: {
          baseAgentType: '1',
          baseAgentCost: ''
        },
        rules: {
          baseAgentCost: [
            { required: true, type: 'number', message: '请输入代理费率', trigger: 'blur' },
            { validator: rateValidate, trigger: 'blur' },
          ],
        },
        agentType: this.$dt.dictInfo().BaseAgentTypeEnum
      }
    },
    methods: {
      onConfirm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$parent.rateUpdate(this.form.baseAgentType, this.form.baseAgentCost)
            this.hide()
          }
        })
      },
      show() {
        this.visible = true
      },
      hide() {
        this.visible = false
        this.form = {
          baseAgentType: '1',
          baseAgentCost: ''
        }
        this.$refs.form.resetFields()
      },
    },
  }
</script>

<style lang='scss' scoped>
</style>